import './Patient.scss';
import { useEffect, useState } from 'react';
import { Patient as PatientItem } from '@/type/bookingType';
import { fetchPatientAPI } from '@/api/hospitalAPI/bookingAPI';
import { Button, Card, Empty, message, Tag } from 'antd';
import { deletePatinetAPI } from '@/api/memberAPI/patinetAPI';
import classNames from 'classnames';
import { useNavigate } from 'react-router-dom';

export const Patient = () => {
  const navigate = useNavigate();
  // 就诊人列表
  const [patientList, setPatientList] = useState<PatientItem[]>([]);
  // 需要删除的就诊人
  const [patient, setPatient] = useState<PatientItem>({} as PatientItem);

  /**
   * @description 获取就诊人列表的回调函数
   * */
  const fetchPatient = async () => {
    try {
      const { data } = await fetchPatientAPI();
      setPatientList(data);
    } catch (error: any) {
      message.error(error.message);
    }
  };

  /**
   * @description 删除就诊人的回调函数
   * */
  const deletePatient = async () => {
    if (!patient.id) return message.warning('请选择需要删除的就诊人');
    try {
      await deletePatinetAPI(patient.id);
      await fetchPatient();
      message.success('删除就诊人成功');
    } catch (error: any) {
      message.error(error.message);
    }
  };
  /**
   * @description 点击添加就诊人的回调函数
   * */
  const addPatient = () => {
    navigate('/member/patientForm');
  };

  /**
   * @description 选择就诊人的回调函数
   * */
  const changePatient = (item: PatientItem) => {
    if (patient.id === item.id) {
      setPatient({} as PatientItem);
      return;
    }
    setPatient(item);
  };

  /**
  * @description 查看就诊人详情回调函数
  * */
  const showPatientDetail=()=>{
    navigate("/member/patientForm")
  }
  const renderPatientList = () => {
    if (patientList.length) {
      return (
        <>
          {patientList.map((item) => {
            return (
              <Card className={classNames(patient.id === item.id ? 'active' : '')} key={item.id} title={item.name} extra={<a href="javascript:;" onClick={showPatientDetail}>查看详情</a>} style={{ width: 1000 }} hoverable onClick={() => changePatient(item)}>
                <div className="card">
                  <Tag color="#f50">{item?.isInsure === 1 ? '医保' : '自费'}</Tag>
                  <span>{item?.certificatesNo} 居民身份证</span>
                  <p>更新时间：{item.updateTime}</p>
                  <p>创建时间：{item.createTime}</p>
                  <p>就诊人ID：{item.id}</p>
                  <p>就诊人地址：{item.param.fullAddress}</p>
                  <p>就诊人性别：{item.sex === 0 ? '女' : '男'}</p>
                  <p>出生日期：{item.birthdate}</p>
                  <p>手机号：{item.phone}</p>
                  <p>婚姻状态：{item.isMarry === 0 ? '未婚' : '已婚'}</p>
                </div>
              </Card>
            );
          })}
        </>
      );
    } else {
      return (
        <Empty></Empty>
      );
    }
  };

  useEffect(() => {
    fetchPatient();
  }, []);

  return (
    <div className="patient">
      <div className="header">
        <h2>就诊人管理</h2>
        <Button type="primary" onClick={addPatient}>添加就诊人</Button>
        <Button type="primary" danger onClick={deletePatient}>删除就诊人</Button>
      </div>
      <div className="patinet-list">
        {
          renderPatientList()
        }
      </div>
    </div>
  );
};

export default Patient;
